<template>
  <div class="static-card">
    <div :class="className">
      <div
        v-for="item in data"
        class="grid-item sheet"
        :class="{ sheet_sm: size === 'sm' }"
      >
        <p class="label">{{ item.label }}</p>
        <span class="content"
          >{{ item.content }}
          <small class="unit">{{ item.unit || '人' }}</small>
        </span>
      </div>
    </div>
  </div>
</template>

<script lang="ts">
import { defineComponent, computed } from 'vue';

export default defineComponent({
  name: 'StaticCard',
  props: {
    size: String,
    data: {
      type: Array,
      default: [],
    },
  },
  setup(props) {
    const className = computed(() => {
      return `grid column_${props.data.length}`;
    });
    return {
      className,
    };
  },
});
</script>

<style lang="scss" scoped>
@import '@/styles/variables.scss';
.static-card {
  background: #3ebde0;
  border-radius: map-get($radii, default);
  .item {
    padding: map-get($spaces, md);
  }
}

.grid-item {
  position: relative;

  &::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 0;
    height: 60%;
    transform: translate(0, -50%);
    border-left: solid 1px rgba(#ededed, 0.3);
  }

  &:first-child::before {
    display: none;
  }
}

.sheet {
  border-radius: $radius;
  color: $white-color;
  text-align: center;
  line-height: 1.4;
  padding: map-get($spaces, sm) map-get($spaces, xs);
  .label {
    font-size: map-get($font-sizes, default);
  }
  .content {
    font-size: map-get($font-sizes, lg);
  }

  .unit {
    font-size: 12px;
  }
}
.sheet.sheet_sm {
  padding: map-get($spaces, xs);
  .label {
    font-size: map-get($font-sizes, xs);
  }
  .content {
    font-size: map-get($font-sizes, md);
  }
}
</style>

